﻿@{
    ViewBag.Title = "ShowTrack";
    ViewBag.First = "车辆管理";
    ViewBag.Second = "车辆行驶轨迹";
    Layout = null;
    var id = ViewData["id"].ToString();
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>车辆行驶轨迹</title>
    <link href="~/Content/css/style.css" rel="stylesheet" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Content/layer-v2.1/layer/layer.js"></script>
    <script src="~/Content/laypage-v1.3/laypage/laypage.js"></script>
    <script src="~/Scripts/comm.js"></script>
</head>
<body>
    <div style="width:100px;height:150px;border:1px solid gray" id="container"></div>
    <script type="text/javascript">

        var load;
        $(function () {
            $("#container").height(window.screen.height - 195);
            $("#container").width(window.screen.width - 195);

            $.post("/CarInfo/GetTrackPic", {"id":@id},callback,'json');
            load = loadTip("数据加载中，请稍候", 16, 0);
        });
        var myPList = [];
        var data = [];
        function callback(o){
            var map = new BMap.Map("container");
            data = eval("("+o+")");
            if(data.message && data.message!="")
            {
                alert(data.message);
            }
            map.centerAndZoom(new BMap.Point(data[0].lng, data[0].lat), 11);
            map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
            map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
            map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
            initPL(0);
            //var myP1 = new BMap.Point(106.521436,29.532288);    //起点-重庆
            //var myP2 = new BMap.Point(108.983569,34.285675);    //终点-西安
            //var myP3 = new BMap.Point(116.404449,39.920423);    //终点-北京

            window.run = function (){
                map.clearOverlays();                        //清除地图上所有的覆盖物
                var driving = new BMap.DrivingRoute(map);    //创建驾车实例
                for(var i=0;i<myPList.length-1;i++){
                    driving.search(myPList[i],myPList[i+1]);
                }
                //driving.search(myP1, myP2);                 //第一个驾车搜索
                //driving.search(myP2, myP3);                 //第二个驾车搜索
                driving.setSearchCompleteCallback(function(){
                    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组

                    var polyline = new BMap.Polyline(pts);
                    map.addOverlay(polyline);

                    //for(var i=0;i<myPList.length;i++){
                    //    var m1 = new BMap.Marker(myPList[i]);  //创建marker
                    //    map.addOverlay(m1);
                    //}
                    var m1 = new BMap.Marker(myPList[0]);  //创建marker
                    map.addOverlay(m1);

                    var m2 = new BMap.Marker(myPList[myPList.length-1]);  //创建marker
                    map.addOverlay(m2);

                    for(var i=0;i<myPList.length;i++){
                        var bName = "";
                        if(i==0){
                            bName= "起点";
                        }else if(i==myPList.length-1){
                            bName="终点";
                        }
                        var lab1 = new BMap.Label(bName,{position:myPList[i]});        //创建label
                        map.addOverlay(lab1);
                    }


                    setTimeout(function(){
                        map.setViewport(myPList);          //调整到最佳视野
                    },1000);

                });
            }
        }

        function initPL(i)
        {
            var gpsPoint = new BMap.Point(data[i].lng,data[i].lat);
            BMap.Convertor.translate(gpsPoint, 0, function(point){
                myPList[i]=point;
                if(i==data.length-1)
                {
                    run();
                    layer.close(load);
                }else{
                    console.log(i++);
                    initPL(i++)
                }
            });
            //alert(gpsPoint);
        }
    </script>
</body>
</html>
